<template>
  <div class="schedule-form">
    <h1>添加日程</h1>
    <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px">
      <el-form-item label="日程标题" prop="title">
        <el-input v-model="formData.title" placeholder="请输入日程标题" clearable :style="{width: '100%'}">
        </el-input>
      </el-form-item>
      <el-form-item label="开始时间" prop="startTime">
        <el-date-picker type="datetime" v-model="formData.startTime" format="yyyy-MM-dd HH:mm:ss"
                        value-format="yyyy-MM-dd HH:mm:ss" :style="{width: '100%'}" placeholder="请选择开始时间" clearable>
        </el-date-picker>
      </el-form-item>
      <el-form-item label="结束时间" prop="endTime">
        <el-date-picker type="datetime" v-model="formData.endTime" format="yyyy-MM-dd HH:mm:ss"
                        value-format="yyyy-MM-dd HH:mm:ss" :style="{width: '100%'}" placeholder="请选择结束时间" clearable>
        </el-date-picker>
      </el-form-item>
      <el-form-item label="日程类型" prop="datesType">
        <el-radio-group v-model="formData.datesType" size="medium">
          <el-radio v-for="(item, index) in datesTypeOptions" :key="index" :label="item.value"
                    :disabled="item.disabled">{{item.label}}</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="样式颜色" prop="color">
        <el-radio-group v-model="formData.color" size="medium">
          <el-radio v-for="(item, index) in colorOptions" :key="index" :label="item.value" style="margin: 5px"
                           :disabled="item.disabled">{{item.label}}</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="日程描述" prop="description">
        <el-input v-model="formData.description" type="textarea" placeholder="请输入描述" show-word-limit
                  :autosize="{minRows: 4, maxRows: 4}" :style="{width: '100%'}"></el-input>
      </el-form-item>

      <el-form-item size="large">
        <el-button type="primary" @click="submitForm">保存</el-button>
        <el-button @click="resetForm">重置</el-button>
      </el-form-item>
    </el-form>


  </div>
</template>

<script>
import { addDate } from '@/api/dates/date'

export default {
  name: 'ScheduleForm',
  data() {
    return {
      formData: {
        title: undefined,
        startTime: null,
        endTime: null,
        datesType: undefined,
        color: undefined,
        description: undefined,
      },
      rules: {
        title: [{
          required: true,
          message: '请输入日程标题',
          trigger: 'blur'
        }],
        startTime: [{
          required: true,
          message: '请选择开始时间',
          trigger: 'change'
        }],
        endTime: [{
          required: true,
          message: '请选择结束时间',
          trigger: 'change'
        }],
        datesType: [{
          required: true,
          message: '日程类型不能为空',
          trigger: 'change'
        }],
        color: [{
          required: true,
          message: '样式颜色不能为空',
          trigger: 'change'
        }],
        description: [{
          required: true,
          message: '请输入描述',
          trigger: 'blur'
        }],
      },
      datesTypeOptions: [{
        "label": "个人",
        "value": 1
      }, {
        "label": "其他",
        "value": 2
      }],
      colorOptions: [{
        "label": "蓝色",
        "value": "primary"
      }, {
        "label": "绿色",
        "value": "success"
      },{
        "label": "红色",
        "value": "danger"
      }, {
        "label": "黄色",
        "value": "warning"
      }],
    }
  },
  methods: {
    submitForm() {
      this.$refs['elForm'].validate(valid => {
        if (valid){
          addDate(this.formData).then(response => {
            if (response.code === 200) {
              this.resetForm()
              location.reload(true)
              this.$message.success('添加成功')
            }
          })
        }
      })
    },
    resetForm() {
      this.$refs['elForm'].resetFields()
    },
  }
}

</script>
<style lang="less" scoped>
.schedule-form {
  background: #fff;
  padding: 10px 40px
}
</style>
